<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
    邮箱登录
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
    <main class="section">
        {# 登录界面 #}
        <div class="columns is-multiline">
            {# 本列用于显示登录错误信息 #}
            <div class="column is-offset-one-quarter is-half">
                {# 判断是否有错误： #}
                {# 1、格式错误 #}
                {% if login_form.errors %}
                    <div class="notification is-danger is-light has-text-centered">
                        <button class="delete"></button>
                        {% for key, error in login_form.errors.items %}
                            {{ error }}
                            <br>
                        {% endfor %}
                    </div>
                    {# 2、用户名或密码错误 #}
                {% else %}
                    {# 当错误消息不为空时才显示 #}
                    {% if msg != null %}
                        <div class="notification is-danger is-light has-text-centered">
                            <button class="delete"></button>
                            {{ msg }}
                        </div>
                    {% endif %}
                {% endif %}
            </div>

            {# 本列用于显示登录表单 #}
            <div class="column is-offset-one-quarter is-half">
                {# 登录表单 #}
                <form action="{% url 'login' %}?next={{ next }}" method="post">
                    <div class="columns is-multiline">
                        <div class="card column">
                            {# 标题 #}
                            <header class="card-header has-background-primary">
                                <div class="column is-full has-text-centered">
                                    <h3 class="title is-3 has-text-white">
                                        用&nbsp;户&nbsp;名&nbsp;登&nbsp;录
                                    </h3>
                                </div>
                            </header>

                            {# 主体 #}
                            <div class="card-content">
                                <div class="content columns is-multiline">
                                    {# 输入框 #}
                                    <div class="column is-8 is-offset-2">
                                        <input class="input {% if login_form.errors.username %}is-danger{% else %}is-primary{% endif %} is-rounded"
                                               name="username" type="text"
                                               value="{{ login_form.username.value }}"
                                               placeholder="请输入用户名">
                                    </div>
                                    {# 输入框 #}
                                    <div class="column  is-8 is-offset-2">
                                        <input class="input {% if login_form.errors.password %}is-danger{% else %}is-primary{% endif %} is-rounded"
                                               name="password" type="password"
                                               value="{{ login_form.password.value }}"
                                               placeholder="请输入密码">
                                    </div>
                                    {# 按钮 #}
                                    <div class="column is-4 is-offset-4">
                                        <button class="button is-rounded is-primary is-fullwidth" type="submit">
                                            登&nbsp;&nbsp;录
                                        </button>
                                    </div>
                                </div>
                            </div>
                            {# 底部 #}
                            <footer class="card-footer">
                                <a href="#" class="card-footer-item">登录需要帮助？</a>
                                <a href="{% url 'register' %}" class="card-footer-item">还没有账号？</a>
                            </footer>
                        </div>
                    </div>
                    {% csrf_token %}
                </form>
            </div>
        </div>
    </main>
{% endblock content %}
